<template>
  <div class="message-list-page">

    <!-- 搜索框 -->
    <div class="search-box">
      <input
          v-model="searchKeyword"
          @input="handleSearch"
          placeholder="搜索聊天记录..."
          class="search-input"
      />
    </div>

    <!-- 消息列表容器 -->
    <div class="message-list">
      <!-- 搜索模式：显示所有搜索结果 -->
      <template v-if="searchKeyword.trim()">
        <!-- 遍历搜索结果中的每条消息 -->
        <div
            v-for="message in searchResults"
            :key="message.messageId"
            class="chat-item search-result-item"
            @click="goToChat(getChatPartner(message), message.messageId)"
        >
          <!-- 聊天对象头像 -->
          <div class="chat-avatar">
            <img :src="getChatPartner(message).avatar || '/default-avatar.png'" :alt="getChatPartner(message).nickname" />
          </div>
          <!-- 聊天信息区域 -->
          <div class="chat-info">
            <!-- 头部：名称和时间 -->
            <div class="chat-header">
              <span class="chat-name">{{ getChatPartner(message).nickname }}</span>
              <span class="chat-time">{{ formatTime(message.createdAt) }}</span>
            </div>
            <!-- 消息预览区域 -->
            <div class="chat-preview">
              <div class="message-content-wrapper">
                <!-- 发送者信息 -->
                <span class="sender-info">
                  {{ getSenderDisplayName(message) }}:
                </span>
                <!-- 消息内容 -->
                <span class="message-content">{{ getMessageContent(message) }}</span>
              </div>
              <!-- 消息状态 -->
              <div class="chat-status">
                <!-- 显示"已发送"状态（仅当消息是当前用户发送时） -->
                <span v-if="message.senderId === currentUser.userId" class="sent-status">已发送</span>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 正常模式：显示聊天列表 -->
      <template v-else>
        <!-- 遍历聊天列表 -->
        <div
            v-for="chat in chatList"
            :key="chat.chatUser.userId"
            class="chat-item"
            @click="goToChat(chat.chatUser)"
        >
          <!-- 聊天对象头像 -->
          <div class="chat-avatar">
            <img :src="chat.chatUser.avatar || '/default-avatar.png'" :alt="chat.chatUser.nickname" />
          </div>
          <!-- 聊天信息区域 -->
          <div class="chat-info">
            <!-- 头部：名称和时间 -->
            <div class="chat-header">
              <span class="chat-name">{{ chat.chatUser.nickname }}</span>
              <span class="chat-time">{{ formatTime(chat.latestMessage.createdAt) }}</span>
            </div>
            <!-- 消息预览区域 -->
            <div class="chat-preview">
              <!-- 最新消息内容 -->
              <span class="message-content">{{ getMessageContent(chat.latestMessage) }}</span>
              <!-- 消息状态区域 -->
              <div class="chat-status">
                <!-- 发送状态 -->
                <span v-if="chat.latestMessage.senderId === currentUser.userId" class="sent-status">已发送</span>
                <!-- 未读消息徽章 -->
                <span v-if="getUnreadCount(chat.chatUser.userId) > 0" class="unread-badge">
                  {{ getUnreadCount(chat.chatUser.userId) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 空状态显示 -->
      <!-- 没有聊天记录时的提示 -->
      <div v-if="chatList.length === 0 && !searchKeyword" class="no-chats">
        暂无聊天记录
      </div>

      <!-- 搜索结果为空时的提示 -->
      <div v-if="searchKeyword && searchResults.length === 0" class="no-chats">
        未找到相关聊天记录
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'MessageList',
  setup() {
    const router = useRouter()

    // 响应式数据定义
    const searchKeyword = ref('') // 搜索关键词
    const chatList = ref([]) // 聊天列表数据
    const currentUser = ref({}) // 当前用户信息
    const searchResults = ref([]) // 搜索结果数据

    /**
     * 从localStorage获取token
     * @returns {string|null} 用户token
     */
    const getToken = () => {
      return localStorage.getItem('token')
    }

    /**
     * 获取当前用户信息
     */
    const getCurrentUser = async () => {
      try {
        const response = await fetch('/api/users/getUserInfo', {
          headers: {
            'token': getToken()
          }
        })
        const result = await response.json()

        if (result.code === 200) {
          currentUser.value = result.data
          await loadMessageList() // 获取用户信息后加载消息列表
        } else {
          alert('获取用户信息失败: ' + result.msg)
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    }

    /**
     * 加载消息列表
     */
    const loadMessageList = async () => {
      try {
        const response = await fetch('/api/messages/selMessageByUserId', {
          headers: {
            'token': getToken()
          }
        })
        const result = await response.json()

        if (result.code === 200) {
          chatList.value = result.data || []
        } else {
          console.error('加载消息列表失败:', result.msg)
        }
      } catch (error) {
        console.error('加载消息列表失败:', error)
      }
    }

    /**
     * 搜索消息
     */
    const searchMessages = async () => {
      // 如果搜索关键词为空，清空搜索结果
      if (!searchKeyword.value.trim()) {
        searchResults.value = []
        return
      }

      try {
        const response = await fetch(`/api/messages/selMessageByFriend?content=${encodeURIComponent(searchKeyword.value)}`, {
          headers: {
            'token': getToken()
          }
        })
        const result = await response.json()

        if (result.code === 200) {
          searchResults.value = result.data || []
        } else {
          console.error('搜索消息失败:', result.msg)
          searchResults.value = []
        }
      } catch (error) {
        console.error('搜索消息失败:', error)
        searchResults.value = []
      }
    }

    /**
     * 获取聊天对象（根据消息判断是发送者还是接收者）
     * @param {Object} message - 消息对象
     * @returns {Object} 聊天对象信息
     */
    const getChatPartner = (message) => {
      // 如果消息是当前用户发送的，聊天对象是接收者，否则是发送者
      return message.senderId === currentUser.value.userId
          ? message.receiverUser
          : message.senderUser
    }

    /**
     * 获取发送者显示名称
     * @param {Object} message - 消息对象
     * @returns {string} 发送者名称
     */
    const getSenderDisplayName = (message) => {
      return message.senderUser.nickname
    }

    let searchTimer = null // 搜索防抖计时器

    /**
     * 处理搜索输入（防抖实现）
     */
    const handleSearch = () => {
      clearTimeout(searchTimer) // 清除之前的计时器
      searchTimer = setTimeout(() => {
        searchMessages() // 延迟执行搜索
      }, 500) // 500ms防抖延迟
    }

    /**
     * 根据消息类型获取消息内容显示
     * @param {Object} message - 消息对象
     * @returns {string} 格式化后的消息内容
     */
    const getMessageContent = (message) => {
      if (message.msgType === 1) {
        return message.content // 文本消息
      } else if (message.msgType === 2) {
        return '[图片]' // 图片消息
      } else if (message.msgType === 3) {
        return '[系统通知]' // 系统消息
      }
      return message.content // 默认返回原内容
    }

    /**
     * 格式化时间显示
     * @param {string|Date} date - 要格式化的日期
     * @returns {string} 格式化后的时间字符串
     */
    const formatTime = (date) => {
      const now = new Date()
      const messageDate = new Date(date)

      // 如果是今天，显示时间
      if (messageDate.toDateString() === now.toDateString()) {
        return messageDate.toLocaleTimeString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit'
        })
      }

      // 如果是昨天，显示"昨天"
      const yesterday = new Date(now)
      yesterday.setDate(yesterday.getDate() - 1)
      if (messageDate.toDateString() === yesterday.toDateString()) {
        return '昨天'
      }

      // 其他情况显示日期
      return messageDate.toLocaleDateString('zh-CN', {
        month: '2-digit',
        day: '2-digit'
      })
    }

    /**
     * 跳转到聊天页面
     * @param {Object} friend - 好友对象
     * @param {string} scrollToMessageId - 要滚动到的消息ID（可选）
     */
    const goToChat = (friend, scrollToMessageId = null) => {
      const query = {
        from: '/message?view=messageList' // 记录来源
      }

      // 如果有指定消息ID，添加到查询参数
      if (scrollToMessageId) {
        query.scrollToMessage = scrollToMessageId
      }

      router.push({
        path: `/chat/${friend.userId}`,
        query: query
      })
    }

    /**
     * 获取未读消息数量（待实现）
     * @param {string} friendId - 好友ID
     * @returns {number} 未读消息数量
     */
    const getUnreadCount = (friendId) => {
      return 0 // 待实现功能
    }

    // 组件挂载后执行
    onMounted(() => {
      getCurrentUser() // 获取当前用户信息
    })

    return {
      searchKeyword,
      chatList,
      searchResults,
      currentUser,
      handleSearch,
      getChatPartner,
      getSenderDisplayName,
      getMessageContent,
      formatTime,
      goToChat,
      getUnreadCount
    }
  }
}
</script>

<style scoped>
.message-list-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-box {
  padding: 15px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

.message-list {
  flex: 1;
  overflow-y: auto;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chat-item:hover {
  background: #f9f9f9;
}

.search-result-item {
  background: #fff9c4; /* 搜索结果高亮背景 */
}

.chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-info {
  flex: 1;
  min-width: 0; /* 允许内容收缩 */
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.chat-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.chat-time {
  font-size: 12px;
  color: #999;
}

.chat-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-content-wrapper {
  flex: 1;
  min-width: 0; /* 允许内容收缩 */
}

.sender-info {
  color: #666;
  font-size: 14px;
  margin-right: 5px;
}

.message-content {
  color: #666;
  font-size: 14px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-width: 200px; /* 最大宽度限制 */
}

.chat-status {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.sent-status {
  font-size: 12px;
  color: #999;
  margin-right: 5px;
}

.unread-badge {
  background: #ff4444;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}

.no-chats {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .header {
    padding: 10px;
  }

  .message-content {
    max-width: 150px; /* 移动端减小最大宽度 */
  }
}
</style>